<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tab选项卡切换</title>
  <!-- 引入阿里的矢量图 -->
  <link href="//at.alicdn.com/t/c/font_3602301_qtmtmeiiy3s.css" rel="stylesheet" type="text/css" />
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      height: 100vmin;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .container {
      border: 1px solid #38ada9;
    }
    /* 标签栏 */
    .nav {
      display: flex;
    }
    .nav .item {
      width: 140px;
      height: 108px;
      border-right: 1px solid #38ada9;
      border-bottom: 1px solid #38ada9;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .nav .item:last-child {
      border-right: none;
    }
    .nav .item::before {
      content: "";
      width: 80px;
      height: 80px;
      background-color: #38ada9;
      border-radius: 50%;
      position: absolute;
      /* 过渡 */
      transition: 0.3s;
    }
    .nav .fa {
      color: #fff;
      position: relative;
      font-size: 36px;
    }
    .nav .item.active::before {
      width: 150%;
      height: 150%;
    }
    /* 内容区 */
    .content {
      width: 100%;
      height: 300px;
      position: relative;
    }
    section {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      /* 默认隐藏 */
      opacity: 0;
      /* 透明度过度 */
      transition: opacity 0.4s;
    }
    section span {
      font-size: 30px;
      font-weight: bold;
      color: #38ada940;
    }
    section.active {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="nav">
      <div class="item active"><i class="fa iconfont icon-jianshenfang"></i></div>
      <div class="item"><i class="fa iconfont icon-jianshen"></i></div>
      <div class="item"><i class="fa iconfont icon-jianshen-"></i></div>
      <div class="item"><i class="fa iconfont icon-jianshen-1"></i></div>
      <div class="item"><i class="fa iconfont icon-jianshen-2"></i></div>
    </div>
    <div class="content">
      <section class="active"><span>1</span></section>
      <section><span>2</span></section>
      <section><span>3</span></section>
      <section><span>4</span></section>
      <section><span>5</span></section>
    </div>
  </div>
</body>
<script>
  const items = document.querySelectorAll('.item');
  const sections = document.querySelectorAll('section');
  function removeAction() {
    // 移除标签选中态样式
    items.forEach(item => {
      item.classList.remove('active');
    });
    // 移除内容区选中态样式
    sections.forEach(item => {
      item.classList.remove('active');
    })
  };

  // 遍历所有标签
  items.forEach((item, index) => {
    // 为每个标签绑定事件
    item.addEventListener('click', function() {
      // 移除选中态样式
      removeAction();
      // 为当前标签添加选中样式
      item.classList.add('active');
      // 为当前内容区添加选中样式
      sections[index].classList.add('active');
    })
  })
</script>
</html>